<template>
  <el-container style="background-color: #e9eff3">
    <el-header>
      <navigation/>
    </el-header>
    <el-main>
      <div style="margin-bottom: 10px;">
        <el-button type="primary" @click="joinOrganization">加入组织</el-button>
        <el-button type="primary" @click="createOrganization">创建组织</el-button>
      </div>
      <!--加入组织-->
      <el-card style="max-width: 100%" v-if="isShowJoin">
        <el-container>
          <el-aside width="200px">
            <el-menu text-color="#81AAF5" @select="handSelect" style="margin-left: 20px">
              <el-menu-item index="10">可加入组织</el-menu-item>
              <el-menu-item index="20">已加入组织</el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <el-table :data="organizationInfo" height="700">
              <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
              <el-table-column align="center" prop="name" label="组织名称"></el-table-column>
              <el-table-column align="center" prop="abbreviation" label="组织简称"></el-table-column>
              <el-table-column align="center" prop="establishmentDate" label="成立日期"></el-table-column>
              <el-table-column align="center" prop="industry" label="所属行业"></el-table-column>
              <el-table-column align="center" prop="contactPerson" label="联系人"></el-table-column>
              <el-table-column align="center" prop="contactEmail" label="联系邮箱"></el-table-column>
              <el-table-column align="center" prop="contactPhone" label="联系电话"></el-table-column>
              <el-table-column align="center" prop="description" label="组织描述"></el-table-column>
              <el-table-column align="center" prop="address" label="地址"></el-table-column>
              <el-table-column align="center" width="200px" prop="createdAt" label="创建时间"></el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button
                      size="small"
                      type="primary"
                      :disabled="scope.row.userId === user.id"
                      @click = join(scope.row.id)
                  >
                    {{ scope.row.userId === user.id ? '禁止' : '加入' }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-card>
      <!--创建组织-->
      <el-card style="max-width: 100%;" v-if="isShowCreate">
        <el-form label-width="80px" label-position="top">
          <el-row :gutter="30">
            <el-col :span="5"></el-col>
            <el-col :span="5">
              <el-form-item label="创建人" style="margin-bottom: 0"></el-form-item>
              <el-input readonly :value="user.username"></el-input>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="5">
              <el-form-item label="组织名称" style="margin-bottom: 0"></el-form-item>
              <el-input placeholder="请输入组织名称" v-model="organization.name"></el-input>
            </el-col>
          </el-row>
          <el-row :gutter="30" style="margin-top: 20px">
            <el-col :span="5"></el-col>
            <el-col :span="5" style="text-align: left;">
              <el-form-item label="成立日期" style="margin-bottom: 0"></el-form-item>
              <el-date-picker
                  type="date"
                  placeholder="Pick a day"
                  value-format="YYYY-MM-DD"
                  style="width: 355.625px;"
                  v-model="organization.establishmentDate"
              />
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="5">
              <el-form-item label="组织简称" style="margin-bottom: 0"></el-form-item>
              <el-input placeholder="请输入组织简称" v-model="organization.abbreviation"></el-input>
            </el-col>
          </el-row>
          <el-row :gutter="30" style="margin-top: 20px">
            <el-col :span="5"></el-col>
            <el-col :span="5">
              <el-form-item label="联系人" style="margin-bottom: 0"></el-form-item>
              <el-input placeholder="请输入联系人" v-model="organization.contactPerson"></el-input>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="5">
              <el-form-item label="所属行业" style="margin-bottom: 0"></el-form-item>
              <el-input placeholder="请输入所属行业" v-model="organization.industry"></el-input>
            </el-col>
          </el-row>
          <el-row :gutter="30" style="margin-top: 20px">
            <el-col :span="5"></el-col>
            <el-col :span="5">
              <el-form-item label="联系电话" style="margin-bottom: 0"></el-form-item>
              <el-input placeholder="请输入联系电话" v-model="organization.contactPhone"></el-input>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="5">
              <el-form-item label="地址" style="margin-bottom: 0"></el-form-item>
              <el-input placeholder="请输入地址" v-model="organization.address"></el-input>
            </el-col>
          </el-row>
          <el-row :gutter="30" style="margin-top: 20px">
            <el-col :span="5"></el-col>
            <el-col :span="5">
              <el-form-item label="联系邮箱" style="margin-bottom: 0"></el-form-item>
              <el-input placeholder="请输入联系邮箱" v-model="organization.contactEmail"></el-input>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="5">
              <el-form-item label="组织状态" style="margin-bottom: 0">
                <el-radio-group v-model="organization.status">
                  <el-radio value="10" border>激活</el-radio>
                  <el-radio value="20" border>不激活</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="30" style="margin-top: 20px">
            <el-col :span="5"></el-col>
            <el-col :span="5">
              <el-form-item label="所属部门" style="margin-bottom: 0">
                <el-select placeholder="请选择部门" v-model="organization.role">
                  <el-option label="行政" value="10"></el-option>
                  <el-option label="财务" value="20"></el-option>
                  <el-option label="法务" value="30"></el-option>
                  <el-option label="人事" value="40"></el-option>
                  <el-option label="IT" value="50"></el-option>
                  <el-option label="其他" value="60"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="5">
              <el-form-item label="组织描述" style="margin-bottom: 0"></el-form-item>
              <el-input placeholder="请输入组织描述" type="textarea" resize="none" :rows="3"
                        v-model="organization.description"></el-input>
            </el-col>
          </el-row>
          <el-row :gutter="30" style="margin-top: 50px">
            <el-col :span="6"></el-col>
            <el-col :span="10">
              <el-form :inline="true">
                <el-form-item style="margin-left: 250px">
                  <el-button type="primary" style="width: 250px">创建</el-button>
                  <el-button type="primary" style="width: 250px">创建</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-main>
  </el-container>
  <!--加入组织弹窗-->
  <el-dialog title="加入组织" v-model="dialogVisible" style="width:1000px;padding:40px;text-align: center" :before-close="closeDialog">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="组织名称">
            <el-input readonly :value="organization.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top: 20px">
        <el-col :span="24">
          <el-form-item label="所属部门" style="margin-bottom: 0">
            <el-select placeholder="请选择部门" v-model="joinSaveInfo.role">
              <el-option label="行政" value="10"></el-option>
              <el-option label="财务" value="20"></el-option>
              <el-option label="法务" value="30"></el-option>
              <el-option label="人事" value="40"></el-option>
              <el-option label="IT" value="50"></el-option>
              <el-option label="其他" value="60"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top: 20px">
        <el-col :span="12"></el-col>
        <el-col :span="12">
          <el-form :inline="true">
            <el-form-item style="margin-left: 250px">
              <el-button>取消</el-button>
              <el-button type="primary">加入</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup>
import Navigation from "@/components/navigation.vue";
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

//获取用户信息
const user = ref(getUser());
console.log(user.value.id);
//定义对象存储查询数据
const select = ref({
  organizationStatus:'',
  userId:'',
  level:'',
  status:''
});
//定义数组存储组织信息
const organizationInfo = ref([]);
const handSelect = (status) => {
  if (status == 10){
    // console.log("10:", status);
    select.value.organizationStatus = status;
    let data = qs.stringify(select.value);
    axios.get(BASE_URL+"/isms/organization/select?"+data)
        .then((response) => {
          if (response.data.code == 200){
            organizationInfo.value = response.data.data;
            select.value = {};
          }else {
            ElMessage.error(response.data.msg);
          }
        })
  }else {
    // console.log("20 :", status);
    select.value.userId = user.value.id;
    select.value.status = status;
    select.value.level = '10';
    let data = qs.stringify(select.value);
    axios.get(BASE_URL+"/isms/organization/select?"+data)
        .then((response) => {
          if (response.data.code == 200){
            organizationInfo.value = response.data.data;
            select.value = {};
          }else {
            ElMessage.error(response.data.msg);
          }
        })
  }
}

//控制卡片显示
const isShowJoin = ref(true);
const isShowCreate = ref(false);
//定义函数控制卡片的显示
const joinOrganization = () => {
  isShowJoin.value = true;
  isShowCreate.value = false;
}
const createOrganization = () => {
  isShowJoin.value = false;
  isShowCreate.value = true;
}

//定义一个组织对象
const organization = ref({
  userId: '',
  name: '',
  establishmentDate: '',
  abbreviation: '',
  contactPerson: '',
  industry: '',
  contactPhone: '',
  address: '',
  contactEmail: '',
  status: '',
  description: '',
  role: '',
})

//控制加入组织弹窗
const dialogVisible = ref(false);

//定义一个对象储存加入组织的信息
const joinSaveInfo = ref({
  role:''
})

//加入组织
const join = (orgId) => {
  dialogVisible.value = true;
}

//关闭弹窗
const closeDialog = () => {
  if (confirm("您确定要关闭吗?")){
    dialogVisible.value = false;
  }
}

//进入页面就加载
onMounted(() => {
  handSelect(10);
})
</script>

<style scoped>

</style>